<template>
  <!-- footer div -->
  <div class="footer_Div">
    <van-tabbar v-model="active" active-color="#f00" @change="onFooterBtnChange">
      <van-tabbar-item to="/">
        <span>首页</span>
        <template #icon="props">
          <div :class="props.active ? icon.a : icon.a1"></div>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/cateList">
        <span>分类</span>
        <template #icon="props">
          <div :class="props.active ? icon.b : icon.b1"></div>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>值得买</span>
        <template #icon="props">
          <div :class="props.active ? icon.c : icon.c1"></div>
        </template>
      </van-tabbar-item>

      <van-tabbar-item>
        <span>购物车</span>
        <template #icon="props">
          <div :class="props.active ? icon.d : icon.d1"></div>
        </template>
      </van-tabbar-item>

      <van-tabbar-item>
        <span>个人</span>
        <template #icon="props">
          <div :class="props.active ? icon.e : icon.e1"></div>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import "../assets/resetVant.css";

export default {
  data() {
    return {
      footer_obj: 0,
      active: 0,
      icon: {
        a: "footerIcon footer_icon_1",
        a1: "footerIcon footer_icon_1_red",
        b: "footerIcon footer_icon_2",
        b1: "footerIcon footer_icon_2_red",
        c: "footerIcon footer_icon_3",
        c1: "footerIcon footer_icon_3_red",
        d: "footerIcon footer_icon_4",
        d1: "footerIcon footer_icon_4_red",
        e: "footerIcon footer_icon_5",
        e1: "footerIcon footer_icon_5_red"
      }
    };
  },
  methods: {
    onFooterBtnChange(index) {
      console.log(index);
      // 点击后 跳转路由
      localStorage.setItem("save_inx", index);
    }
  },
  mounted() {
    let _n = localStorage.getItem("save_inx");
    this.footer_obj = Number(_n);
    this.active = Number(_n); // 初始化选中
  },
  created() {
    // this.onFooterBtnChange(0)
  }
};
</script>

<style lang="scss" scoped>
</style>